<template>
  <div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="swiper in swiperList" :key="swiper">
        <img :src="swiper.carouselUrl" @click="redirectTo(swiper.redirectUrl)" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script lang="ts">
import { toRefs } from '@vue/reactivity'
import { SwiperItemType } from '../types/common'

export default {
  name: 'swiper',
  props: {
    swiperList: {
      type: Array,
      required: true
    }
  },
  setup (props: any) {
    const { swiperList } = props

    const redirectTo: Function = (url: string): void => {
      window.open(url)
    }
    return {
      swiperList,
      redirectTo
    }
  }
}
</script>

<style lang="less">
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: auto;
    text-align: center;
    background-color: #fff;
  }

  .my-swipe {
    img {
      width: 100%;
      height: 100%;
    }
  }
</style>